<script setup lang="ts">
import { ref, computed, reactive, toRaw } from 'vue'
import { debounce } from 'throttle-debounce'
import storage from '~/helpers/storage'
import { isExt } from '~/helpers/vars'
import { getDefaultOptions } from '~/config'

const hostname = ref('')
const model = reactive(getDefaultOptions())
const isBlockCurrentDomain = computed(() => model.domainBlockList.some(el => el === hostname.value))
const disable = ref(false)

type TKey = keyof typeof model

const tipList = [
  { tip: '切换控制当前页签的网页', key: 'Alt + X' },
  { tip: '全局关闭或启用透明度', key: 'Alt + W' },
  { tip: '关闭或启用当前伪装页', key: 'Alt + Z' },
]

if (isExt) {
  chrome.tabs.query({ currentWindow: true, active: true }).then(tabs => {
    const tab = tabs[0]
    const p = new URL(tab.url!)
    hostname.value = p.hostname
    disable.value = !/^https?:$/i.test(p.protocol)
  })
}

async function sendMessageToContent() {
  const tabs = await chrome.tabs.query({})
  tabs.forEach(tab => {
    chrome.tabs.sendMessage(tab.id!, { type: 'config', data: Object.assign({}, toRaw(model)) })
  })
}

const onUpdateValue = debounce(200, async (key: TKey) => {
  if (isExt) await sendMessageToContent()
  await storage.set({ [key]: toRaw(model[key]) })
})

const onDisableCurrentDomain = () => {
  if (isBlockCurrentDomain.value) {
    model.domainBlockList = model.domainBlockList.filter(el => el !== hostname.value)
  } else {
    model.domainBlockList.push(hostname.value)
  }
  onUpdateValue('domainBlockList')
}

const onReset = async () => {
  await storage.clear()
  const d = getDefaultOptions()
  Object.keys(d).forEach(el => {
    (model as any)[el as TKey] = d[el as TKey]
  })
}

storage.get().then((items) => {
  Object.keys(toRaw(model)).forEach((el) => {
    if (items.hasOwnProperty(el)) {
      (model as any)[el as TKey] = items[el]
    }
  })
})
</script>

<template>
  <div style="color:#666;font-size:14px;">
    <div v-for="item in tipList">
      <span>{{ item.tip }}：</span>
      <b>{{ item.key }}</b>
    </div>
  </div>
  <el-form label-width="80px" class="mt-3" :disabled="disable">
    <el-form-item label="开关">
      <el-tooltip :content="`${isBlockCurrentDomain ? '启用' : '禁用'}当前域名`">
        <el-button
          native-type="button"
          plain
          class="me-2"
          :disabled="!model.globalEnable"
          @click="onDisableCurrentDomain"
        >{{ isBlockCurrentDomain ? '✕' : '✓' }} {{ hostname }}</el-button>
      </el-tooltip>
      <el-tooltip content="全局禁用（快捷键 Alt + Q） ">
        <el-switch v-model="model.globalEnable" @change="onUpdateValue('globalEnable')" />
      </el-tooltip>
    </el-form-item>
    <el-form-item label="https伪链">
      <el-input v-model="model.linkHttps" @input="onUpdateValue('linkHttps')" />
    </el-form-item>
    <el-form-item label="http伪链">
      <el-input v-model="model.linkHttp" @input="onUpdateValue('linkHttp')" />
    </el-form-item>
    <el-form-item label="透明度">
      <el-slider v-model="model.opacity" @input="onUpdateValue('opacity')" />
    </el-form-item>
    <div class="text-center">
      <el-button @click="onReset">重置</el-button>
    </div>
  </el-form>
</template>
